<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="sb" uri="/struts-bootstrap-tags" %>

<%@ taglib prefix="s" uri="/struts-tags" %>
<%@ include file="/page/user/userHeadr.jsp" %>
<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="<%=basePath %>js/jquery-2.0.3.min.js" type="text/javascript"></script>
<title>欢迎来到饿9订</title>
<style type="text/css">
table tr td{
font-family: "微软雅黑";font-size: 10px;
}
.comName{
font-family: "微软雅黑";font-size: 18px;
}
*{
font-family: "微软雅黑";margin:0;padding:0;
}
.addcomType{
background-color: #0089e0;
}
ul li a:LINK{text-decoration: none;color:black;}
ul li  a:visited {text-decoration:none ; color:#0089e0;}
ul li  a:hover {text-decoration:underline ; color:#0089e0;}
ul li  a:active {text-decoration:none ; color:#0089e0;} 

ol li a:LINK{text-decoration: none;color:#999;}
ol li  a:visited {text-decoration:none ; color:#0089e0;}
ol li  a:hover {text-decoration:underline ; color:#0089e0;}
ol li  a:active {text-decoration:none ; color:#0089e0;} 
#comDistr{
width: 100px;font-size: 14px;margin-top: -5px;font-family: "微软雅黑";
}
ul,li,img{margin:0;padding:0;border:0;list-style-type:none;}
#list{height:250px;list-style-type:none;overflow:hidden;}
#luanpo{max-width:1200px;height:100px;border:1px solid #CCC;margin:0 auto;position:relative;overflow:hidden;}

#imgs li{float:left;height:100px;width:1200px;}
#imgs{height:100px;background:#ddd;position:absolute;}
.a{background:#0089e0;}
.b{background:white;}

#num{overflow:auto;position:absolute;right:0;bottom:0;}
#num li{float:left;height:18px;width:18px;text-align:center;line-height:15px;border:1px solid #CCC;margin-left:10px;cursor:pointer;z-index:4321;}
</style>
<script type="text/javascript">
function repInput(){
   $("#appendedInput").attr("style","width:330px;height: 30px;margin-top: 5px;");
}
function huifuInput(){
	 $("#appendedInput").attr("style","width:250px;height: 30px;margin-left: 80px;margin-top: 5px;");
}
</script>
<sb:head/>
</head>
<body onload="userComList()">
<s:hidden value="%{#session.user.userId}" id="user"></s:hidden>
<div style="width: 1200px;height: 50px;margin:0px auto;">
<div style="width: 300px;height: 50%;float:left;margin-top:15px; ">当前位置：<s:property value="#session.custom"/>[<a href="##">切换</a>]</div>
<div style="width: 400px;height: 100%;float:right;"class="input-append">
<input class="span2" id="appendedInput" type="text"  placeholder="搜索餐厅、美食..."  style="width: 250px;height: 30px;margin-left: 80px;margin-top: 5px;" onmouseover="repInput()" onmouseout="huifuInput()" >
 <span class="add-on" style="width: 40px;height: 30px;margin-top: 5px;">搜索</span>
</div>
</div>
<s:hidden id="address" value="%{address}"></s:hidden>
<div style="width: 1200px;height: 320px;margin:0px auto;border: #e6e6e6 1px solid;">
<div style="width: 1200px;height: 100px;" id="luanpo" >
 <ul id="imgs">
           <s:iterator value="%{ads}" id="ad">
            <li><img alt="" width="1200px" height="100px" src="<%=basePath%>upload/<s:property value="#ad.adImage"/>"> </li>
            </s:iterator>
        </ul>
        <ol id="num">
            <s:iterator value="%{ads}" status="a">
            <s:if test="#a.index==1">
            <li class="a"><s:property value="#a.index+1"/></li>
            </s:if>
            <s:else>
            <li class="b"><s:property value="#a.index+1"/></li>
            </s:else>
           </s:iterator>
        </ol>
</div>
<script type="text/javascript">
var imgs=document.getElementById('imgs').getElementsByTagName('li');
var nums=document.getElementById("num").getElementsByTagName("li");
var luanpo=document.getElementById("luanpo");
var oimg=document.getElementById('imgs');
var iNow=0;
var dt=null;
oimg.style.width=imgs.length*imgs[0].offsetWidth+"px";

function tab(){
for(var i=0;i<nums.length;i++){
    nums[i].index=i;
    nums[i].onclick=function(){
        clearInterval(dt);
        iNow=this.index;
        for(var i=0;i<nums.length;i++){
            nums[i].className="b";        
        }
        this.className="a";
        oimg.style.left=-(imgs[0].offsetWidth*iNow)+"px";    //这边可以加上我前面所写的那个缓动框架            
    }
    nums[i].onmouseout=function(){
            start();
    }
}
}
function start(){
	clearInterval(dt);
    dt=setInterval(function(){
        if(iNow>nums.length-2){
        iNow=0;
        }else{
        iNow++;
        }
        for(var k=0;k<nums.length;k++){
            if(iNow==nums[k].index){nums[k].className='a';}else{nums[k].className='b';}
        }
        oimg.style.left=-(imgs[0].offsetWidth*iNow+25)+"px";    //这边可以加上我前面所写的那个缓动框架
    },3000);
    tab();
}
start();
</script>
<div style="width: 1200px;height: 50px;border: #e6e6e6 1px solid;">
<ol style="list-style: none;font-size: 20px;margin-top: 15px;">
<li style="float:left;text-align:center;padding-right: 30px;color:#0089e0;"><a href="javascript:void(0)" style="color:#0089e0;" >餐厅分类</a> </li>

</ol>
</div>
<div style="width: 1200px;height: 50px;border: #e6e6e6 1px solid;">
<ul style="list-style: none;font-size: 14px;margin-top: 15px;">
<li style="float:left;text-align:center;padding-right: 30px;color:#999;">餐厅分类:</li>
<li style="float:left;text-align:center;border-radius: 3px;color:#fff;"><a href="javascript:void(0)" style="" class="comType addcomType" id="<s:property value='#companyType.comtypeId'/>">不限</a></li>
<s:iterator value="%{companyTypes}" id="companyType">
<li style="float:left;text-align:center;padding-left: 30px;"><a href="javascript:void(0)" class="comType" id="<s:property value='#companyType.comtypeId'/>"><s:property value="#companyType.comtypeName"/></a> </li>
</s:iterator>
</ul>
</div>
<div style="width: 1200px;height: 50px;border: #e6e6e6 1px solid;">
<ul style="list-style: none;font-size: 14px;margin-top: 15px;">
<li style="float:left;text-align:center;padding-right: 30px;color:#999;">优惠活动:</li>
<li style="float:left;text-align:center;"><a href="javascript:void(0)"  onclick="userComByComDis()">不限</a></li>
<s:iterator value="%{companyDiscounts}" id="companyDiscount">
<li style="float:left;text-align:center;padding-left: 30px;"><label class="checkbox"><input type="checkbox" class="comdis" id="<s:property value="#companyDiscount.cdId"/>" onclick="userComByComDis()"/><s:property value="#companyDiscount.cdName"/></label></li>
</s:iterator>
</ul>
</div>
<div style="width: 1200px;height: 50px;margin-top: 0px;">
<ul style="list-style: none;font-size: 14px;margin-top: 15px;">
<li style="float:left;text-align:center;color:#0089e0;">默认排序</li>
<li style="float:left;text-align:center;padding-left: 30px;"><a href="javascript:void(0)" onclick="userComSort('total_num')">销量</a></li>
<li style="float:left;text-align:center;padding-left: 30px;"><a href="javascript:void(0)" onclick="userComSort('avg_eval')">评价</a></li>
<li style="float:left;text-align:center;padding-left: 30px;"><a href="javascript:void(0)" onclick="userComSort('room_date')">送餐速度</a></li>
<li style="float:left;text-align:center;padding-left: 30px;">起送价筛选:</li>
<li style="float:left;text-align:center;padding-left: 30px;">
<select id="comDistr" onchange="userComByDis()">
<option value="">全部餐厅</option>
<option value="0">10元以下</option>
<option value="1">20元以下</option>
<option value="2">30元以下</option>
</select>
</li>
</ul>
</div>
</div>
<div style="width: 1200px;height: 700px;margin:15px auto;border: #e6e6e6 1px solid;">
<div id="list" style=""></div>
<div id="page"></div>
</div>
<script type="text/javascript">
var postDate={address:$("#address").val(),comName:$("#comName").val()};
var userId=$("#user").val();
function userComList(){
$.ajax({
	type:'post',
	url:'com_getCompanys',
	data:postDate,
	dataType:'json',
	success:function(data){
      // alert(data.list[0].comName);
       var  tab="<table style='margin:10px auto;'>";
       for(var i=0;i<data.list.length;i=i+3){
    	    
    	     tab+='<tr height="150px">';
    	     tab+='<td width="350px" height="150px" style=" padding-left:10px;">';
    	     tab+='<table>';
    	     tab+='<tr  height="30px;">';
    	     tab+='<td rowspan="3" width="100px;" height="30px;" ><a href="menu_menuList?comId='+data.list[i].comId+'" target="_bank"> <img width="100px" height="100px" src="<%=basePath%>upload/'+data.list[i].comImage+'"></a></td>';
    	     tab+='<td width="240px;" height="25px;" ><span class="comName"><a href="menu_menuList?comId='+data.list[i].comId+'&userId='+userId+'" target="_bank"> <strong>'+data.list[i].comName+'</strong></a> </span></td>';
    	     tab+='</tr>';
    	     tab+='<tr height="30px;" >';
    	     tab+='<td width="240px;" height="25px;" ><span>'+data.list[i].comDis+'元起送 / 免配送费</span></td>';
    	     tab+='</tr>';
    	     tab+='<tr height="30px;">';
    	     tab+='<td width="240px;" height="25px;"><span><img src="<%=basePath%>image/start/start'+data.list[i].avgEval+'.png"/>&nbsp;&nbsp;月售<span color="red" >'+data.list[i].totalNum+'</span>单</span></td>';
    	     tab+='</tr>';
    	     tab+='<tr height="30px;">';
    	     tab+='<td width="100px;" height="25px;" ><span>平均送餐时间:</span></td>';
    	     tab+='<td width="240px;" height="25px;">'+data.list[i].roomDate+'分钟</td>';
    	     tab+='</tr></table></td><td width="350px" height="150px" style="padding-left:10px;">';
             if(i+1<data.list.length){
     	     tab+='<table>';
    	     tab+='<tr  height="30px;">';
    	     tab+='<td rowspan="3" width="100px;" height="30px;" ><img width="100px" height="100px" src="<%=basePath%>upload/'+data.list[i+1].comImage+'"></td>';
    	     tab+='<td width="240px;" height="25px;" ><span class="comName"><a href="menu_menuList?comId='+data.list[i].comId+'&userId='+userId+'" target="_bank"> <strong>'+data.list[i].comName+'</strong></a> </span></td>';
    	     tab+='</tr>';
    	     tab+='<tr height="30px;" >';
    	     tab+='<td width="240px;" height="25px;" ><span>'+data.list[i+1].comDis+'元起送 / 免配送费</span></td>';
    	     tab+='</tr>';
    	     tab+='<tr height="30px;">';
    	     tab+='<td width="240px;" height="25px;"><span><img src="<%=basePath%>image/start/start'+data.list[i+1].avgEval+'.png"/>&nbsp;&nbsp;月售<span color="red" >'+data.list[i+1].totalNum+'</span>单</span></td>';
    	     tab+='</tr>';
    	     tab+='<tr height="30px;">';
    	     tab+='<td width="100px;" height="25px;" ><span>平均送餐时间:</span></td>';
    	     tab+='<td width="240px;" height="25px;">'+data.list[i+1].roomDate+'分钟</td>';
    	     tab+='</tr></table>'
             }
        	 tab+='</td><td width="350px" height="150px" style="padding-left:10px;">';
    	     if(i+2<data.list.length){
    	     tab+='<table>';
    	     tab+='<tr  height="30px;">';
    	     tab+='<td rowspan="3" width="100px;" height="30px;" ><img width="100px" height="100px" src="<%=basePath%>upload/'+data.list[i+2].comImage+'"></td>';
    	     tab+='<td width="240px;" height="25px;" ><span class="comName"><a href="menu_menuList?comId='+data.list[i].comId+'&userId='+userId+'" target="_bank"> <strong>'+data.list[i].comName+'</strong></a> </span></td>';
    	     tab+='</tr>';
    	     tab+='<tr height="30px;" >';
    	     tab+='<td width="240px;" height="25px;" ><span>'+data.list[i+2].comDis+'元起送 / 免配送费</span></td>';
    	     tab+='</tr>';
    	     tab+='<tr height="30px;">';
    	     tab+='<td width="240px;" height="25px;"><span><img src="<%=basePath%>image/start/start'+data.list[i+2].avgEval+'.png"/>&nbsp;&nbsp;月售<span color="red" >'+data.list[i+2].totalNum+'</span>单</span></td>';
    	     tab+='</tr>';
    	     tab+='<tr height="30px;">';
    	     tab+='<td width="100px;" height="25px;" ><span>平均送餐时间:</span></td>';
    	     tab+='<td width="240px;" height="25px;">'+data.list[i+2].roomDate+'分钟</td>';
    	     tab+='</tr></table>';
    	      }
        	 tab+='</td></tr>';
           }
       tab+='</table>';
       //console.log (tab);
      document.getElementById("list").innerHTML="";
       $("#list").append(tab);
		}
});
}

function userComByComType(comType){
	//$("#comType").addClass("comType");
	alert($(this).attr("id"));
	postDate={address:$("#address").val(),comName:$("#comName").val(),comType:comType};
	//alert(comType);
	userComList();
}

$(".comType").click(function(){
	var comType=$(this).attr("id");
	$(".comType").removeClass("addcomType");
	$(this).addClass("addcomType");
	postDate={address:$("#address").val(),comName:$("#comName").val(),comType:comType};
	//alert(comType);
	userComList();
});

function userComByComDis(){
	var checked=[];
	 $('.comdis:checked').each(function() {
         checked.push($(this).attr("id"));
     });
     //alert(checked);
     var comdis="";
     for(var i=0;i<checked.length;i++){
           comdis+=checked[i]+";";
         }
    // alert(comdis);
     postDate={address:$("#address").val(),comName:$("#comName").val(),comDiscount:comdis};
     userComList();
}
var i=1;
function userComSort(order){
	//alert($(this).attr("id"));
	i++;
	var sort="";
	if(i%3==0){
       sort="desc";
		}else if (i%3==1) {
			sort="asc";
		}else {
			sort="desc";
		}
	postDate={address:$("#address").val(),comName:$("#comName").val(),order:order,sort:sort};
	userComList();
	//alert(order);
}
function userComByDis(){
	var comDis=$("#comDistr").val();
	//alert(comDis);
	postDate={address:$("#address").val(),comName:$("#comName").val(),comDistr:comDis};
	userComList();
}
</script>
</body>
<%@ include file="/page/user/userFooter.jsp"%>
</html>